<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>

<style>
.img{
	height: 20px;
	width: 20px;
}
</style>
<link href="/sc/css/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="/sc/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/sc/js/jquery-ui.js"></script>
<link href="/sc/css/red-datepicker.css" rel="stylesheet">
<link rel="stylesheet" href="/sc/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="/sc/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {   
        $('#popupDatepicker').datepicker(); //绑定输入框         
       $("#name").blur(function(){
    	   var name=$("#name").val();
    	   if(name==""){
    	   $("#checkName").html("<font color='red' size='2'>用户名不能为空</font>");
    	   }else{
    		   
    		   $.post("${ctxPath}/user/checkName1",{"name":name},function(data){
    			     if(data==""){
    			    	$('#checkName').html("<img src='/sc/img/right.jpg' class='img'>");
    			   }else{ 
    			   $("#checkName").html("<font color='red' size='2'>"+data+"</font>"); 
    			   } 
    		   });
    	   }
       }); 
        
       $("#password").blur(function(){
    	   var psw=$("#password").val();
    	   if(psw==""){
    		   $("#checkPsw").html("<font color='red' size='2'>密码不能为空</font>"); 
    	   }else{
    		   $('#checkPsw').hide();
    	   }
       }); 
       
       $("#password1").blur(function(){
    	   var psw=$("#password").val();
    	   var psw1=$("#password1").val();
    	   if(psw!=psw1){
    		   $("#checkPsw1").html("<font color='red' size='2'>两次输入密码不一致</font>"); 
    	   }else if(psw1!=""){
    		   $('#checkPsw1').html("<img src='/sc/img/right.jpg' class='img'>");
    	   }
       });  
        
        
       $("#real").blur(function(){
    	   var real=$("#real").val();
    	   if(real==""){
    		   $("#checkReal").html("<font color='red' size='2'>真实姓名不能为空</font>"); 
    	   }else{
    		   $('#checkReal').html("<img src='/sc/img/right.jpg' class='img'>"); 
    	   }
       });  
       
		
        
        
	}); 
</script>

</head>
<body>
	<div style="padding: 0px; margin: 0px;">
		<ul class="breadcrumb" style="margin: 0px;">
			<li>手机商城</li>
			<li>用户注册</li>
				<li>
				<a href="${ctxPath}/user"><input type="button" value="前往登录"/></a>
				</li>
				
		</ul>
	</div>

	<form action="${ctxPath}/user/register" class="form-horizontal" method="post" id="form">
		<h5 class="page-header alert-info"
			style="padding: 10px; margin: 0px; margin-bottom: 5px;">基本信息</h5>
		<div class="row">
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">用户名</label>
					<div class="col-sm-9">
						<input type="text" name="name" id="name"
							class="form-control input-sm" placeholder="请输入用户名" />
					</div>
				</div>
			</div>
			<div id="checkName">
			</div>
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">密码</label>
					<div class="col-sm-9">
						<input type="password" name="password" id="password"
							class="form-control input-sm" placeholder="请输入密码" />
					</div>
				</div>
			</div>
			<div id="checkPsw">
		</div>
		<!-- 开始2 -->
		<div class="row">
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">确认密码</label>
					<div class="col-sm-5">
						<input type="password" id="password1" class="form-control input-sm"
							placeholder="请再次输入密码" />
					</div>
				</div>

			</div><div id="checkPsw1"></div>
			
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">性别</label>
					<div class="col-sm-4">
						<select class="form-control input-sm" name="gender">
							<option value="1">男</option>
							<option value="0">女</option>
						</select>
					</div>
				</div>
			</div>
		</div>
		<!-- 结束2 开始3 -->
		<div class="row">
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">昵称</label>
					<div class="col-sm-6">
						<input type="text" name="nickName" 
							class="form-control input-sm" placeholder="请输入昵称" />
					</div>
				</div>

			</div>
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">姓名</label>
					<div class="col-sm-9">
						<input type="text" name="realName" id="real"
							class="form-control input-sm" placeholder="请输入姓名" />
					</div>
				</div>
			</div><div id="checkReal">
		</div>
		<!-- 结束3 开始4 -->
		<div class="row">
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">出生日期</label>
					<div class="col-sm-9">
						<input type="text" id="popupDatepicker" name="birthDate"
							class="form-control input-sm" placeholder="请输入出生日期" readonly />
					</div>
				</div>

			</div>
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">年龄</label>
					<div class="col-sm-9">
						<input type="text" name="age" id="age"
							class="form-control input-sm" placeholder="请输入年龄" />
					</div>
				</div>
			</div>
		</div>
		<!-- 结束4 开始4 -->
		<div class="row">
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">余额</label>
					<div class="col-sm-9">
						<input type="text" name="balance" class="form-control input-sm"
							value="10000" placeholder="请输入余额" />
					</div>
				</div>

			</div>
			<div class="col-sm-5">
				<div class="form-group">
					<label class="col-sm-3 control-label">托管金额</label>
					<div class="col-sm-9">
						<input type="text" name="towBalance" class="form-control input-sm"
							value="10000" placeholder="请输入托管金额" />
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-3 col-sm-offset-4">
				<input type="submit" class="btn btn-success" value="保存" /> <input
					type="reset" class="btn  btn-danger" value="重置" />
			</div>
		</div>
	</form>	
	<div class="row">
			<div class="col-sm-3 col-sm-offset-4">
				<h1><font color="green">${success!}</font><h1>
			</div>
		</div>	
</body>
</html>